<template>
  <div class="all-app-dialog">

    <el-dialog
        v-model="dialogVisible"
        :before-close="handleClose"
        title="批量添加招商终端"
        width="900px"
    >

      <div>

        <div>
          <el-form
              :inline="true"
              :model="screendData"
              label-position="right"
              size="small"
          >

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="终端地区">
                  <el-cascader
                      ref="cascader"
                      v-model="screendData.areas"
                      :options="area"
                      :popper-append-to-body="false"
                      :props="props1"
                      clearable
                      placeholder="请选择地区"
                      @change="areaChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终端类型">
                  <span>{{ getLabel('app_mode', screendData.type) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终端名称">
                  <el-input v-model="screendData.terminalName"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button plain size="small" type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>

        </div>

        <el-table
            :data="tableData"
            border
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
          <el-table-column
              :selectable="selectable"
              type="selection"
              width="55"
          />
          <el-table-column
              align="center"
              header-align="center"
              label="终端名称"
              show-overflow-tooltip
          >
            <template #default="scope">

              <el-popover
                      v-if="scope.row.errorStatus || scope.row.isRepeat"
                      :width="200"
                      placement="top-start"
                      trigger="hover"
              >
                <span v-if="scope.row.errorStatus">{{ errMap[scope.row.errorStatus] }}</span>
                <span v-else>终端已添加</span>

                <template #reference>
                  <el-icon style="margin: 0px 10px">
                    <info-filled/>
                  </el-icon>
                </template>
              </el-popover>

              <span>{{ scope.row.terminal.terminalName }}</span>

            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  header-align="center"
                  label="适用终端"
                  width="100"
                  prop="type"
          >
            <template #default="scope">
              {{ getLabel('app_mode', scope.row.terminal.terminalType) }}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  header-align="center"
                  label="子分类"
                  prop="s_type"
          >
            <template #default="scope">
              {{ getLabel(scope.row.terminal.terminalType, scope.row.terminal.childProperty) }}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  header-align="center"
                  label="所在地区"
                  prop="area"
                  show-overflow-tooltip
          />
          <el-table-column
                  align="center"
                  header-align="center"
                  label="详细地址"
                  prop="terminal.address"
                  show-overflow-tooltip
          />

        </el-table>

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
                  type="primary"
                  @click="dialogConfirm"
          >确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import {crmStore} from '@CRM/store'
  import {InfoFilled} from '@element-plus/icons'
  import {defineComponent, getCurrentInstance, inject, reactive, ref} from 'vue'

  export default defineComponent({
    name: 'AllAppDialog',
    components: {InfoFilled},
    props: {
      area: {
        type: Array,
        default: [],
      },
      planId: {
        type: Number,
        default: 0,
      },
      list: {
        type: Array,
        default: [],
      },
    },
    setup(props, {emit}) {
      var dialogVisible = ref(false)
      const api = inject('api')
      var cascader = ref(null)
      const currentInstance = getCurrentInstance()
      const props1 = reactive({
        expandTrigger: 'hover',
        label: 'regionName',
        value: 'regionCode',
      })
      var errMap = ref({})
      const typeOptions = crmStore.getters['dictionary/getDictionary']['app_mode']

      var screendData = reactive({
        region: [],
        type: '',
        areas: [],
        terminalName: ''
      })

      var selects = ref([])

      var tableData = ref([])

      const getAreaCode = () => {
        const a = {
          provinceCode: [],
          cityCode: [],
          areaCode: []
        }
        for (let i = 0; i < screendData.areas.length; i++) {
          const area = screendData.areas[i]
          if (area[0]) {
            a.provinceCode.push(area[0])
          }
          if (area[1]) {
            a.cityCode.push(area[1])
          }
          if (area[2]) {
            a.areaCode.push(area[2])
          }
        }

        return a
      }

      const getListData = () => {
        // if (!screendData.terminalName) {
        //   currentInstance.proxy.customMessage({type: 'error', message: '请输入终端名称'})
        //   return
        // }
        let arr = []
        console.log(screendData.areas)
        if (screendData.areas && screendData.areas.length) {

          arr.push(screendData.areas[screendData.areas.length - 1])
        }
        const data = {
          id: props.planId,
          terminalType: screendData.type,
          region: screendData.region,
          modelType: 1,
          areaSelectType: arr.length ? true : false,
          areaCode: arr,
          terminalName: screendData.terminalName,
        }

        api.plan.PLAN_CHECK_TERMINAL(data).then((res) => {
          if (!res.code) {
            if (res.data.list && res.data.list.terminalList) {
              res.data.list.terminalList.forEach((item) => {
                item.value = item.terminal.terminalName

                if (item.terminal.provinceName) {
                  item.area = item.terminal.provinceName
                }
                if (item.terminal.cityName) {
                  item.area = item.area + '/' + item.terminal.cityName
                }
                if (item.terminal.areaName) {
                  item.area = item.area + '/' + item.terminal.areaName
                }
                console.log(props.list)
                console.log(item.terminal.id)
                console.log(props.list.findIndex((a) => a.terminalId == item.terminal.id))
                if (props.list.findIndex((a) => a.terminalId == item.terminal.id) != -1) {
                  item.isRepeat = true
                }
                console.log(item.isRepeat)
                if (item.isRepeat || item.errorStatus) {
                  item.disable = true
                }
              })
              errMap.value = res.data.list.errMap
              tableData.value = res.data.list.terminalList
            }
          } else {
            currentInstance.proxy.customMessage({type: 'error', message: res.msg})
          }
      })
    }

    const areaChange = (val) => {
      // const serve = currentInstance.proxy.getServeAreaData(
      //   val,
      //   cascader.value.getCheckedNodes()
      // )
      // screendData.region = serve
      tableData.value = []
      if (screendData.terminalName) {
        getListData()
      }

    }

    const openDialog = (info) => {
      console.log(info)
      screendData.type = info.terminalType
      screendData.region = info.region
      // screendData.areas = info.areas
      dialogVisible.value = true
      // getListData()
    }

    const handleClose = () => {
      dialogVisible.value = false

      screendData.areas = []
      screendData.region = []
      screendData.type = ''
      selects.value = []
      tableData.value = []
    }

    const dialogConfirm = () => {
      if (!selects.value.length) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择终端',
        })
        return
      }

      const s = []
      selects.value.forEach((item) => {
        const data = {
          terminalId: item.terminal.id,
          terminalName: item.terminal.terminalName,
          area: item.area,
        }
        s.push(data)
      })
      emit('confirm', s)
      dialogVisible.value = false

      screendData.areas = []
      screendData.region = []
      screendData.type = ''
      selects.value = []
      tableData.value = []
    }

    const onSearch = () => {
      tableData.value = []
      getListData()
    }

    const handleSelectionChange = (val) => {
      selects.value = val
    }

    const selectable = (row) => {
      return !row.disable
    }

    return {
      dialogVisible,
      props1,
      screendData,
      typeOptions,
      tableData,
      errMap,
      cascader,

      openDialog,
      handleClose,
      dialogConfirm,
      handleSelectionChange,
      areaChange,
      selectable,
      onSearch,
    }
  },
})
</script>

<style scoped>
</style>
